<template>
  <div style="padding: 0 15px;" @click="toggleClick">
    <!-- <svg
      :class="{'is-active':isActive}"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
    >
      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
    </svg> -->
    <svg :class="{'is-active':isActive}" t="1652259431071" class="hamburger" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8496" width="64" height="64">
      <path d="M937.387 488.107L772.267 372.48c-12.8-9.387-30.294-6.827-40.107 5.547-3.84 4.693-5.547 10.666-5.547 17.066v233.814c0 22.613 25.6 36.693 45.654 22.613l165.546-115.627c14.08-14.08 14.08-36.693-0.426-47.786z m-23.04-274.774H129.28c-18.773 0-34.133-15.36-34.133-34.133s15.36-34.133 34.133-34.133h785.067c18.773 0 34.133 15.36 34.133 34.133s-14.933 34.133-34.133 34.133z m0 665.6H129.28c-18.773 0-34.133-15.36-34.133-34.133s15.36-34.133 34.133-34.133h785.067c18.773 0 34.133 15.36 34.133 34.133s-14.933 34.133-34.133 34.133zM624.213 435.2H129.28c-18.773 0-34.133-15.36-34.133-34.133s15.36-34.134 34.133-34.134h494.933c18.774 0 34.134 15.36 34.134 34.134S643.413 435.2 624.213 435.2z m0.427 221.867H129.28c-18.773 0-34.133-15.36-34.133-34.134s15.36-34.133 34.133-34.133h495.36c18.773 0 34.133 15.36 34.133 34.133v0.427c-0.426 18.347-15.36 33.707-34.133 33.707z" p-id="8497" fill="#ffffff"></path></svg>
  </div>
</template>

<script>
export default {
  name: 'Hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleClick() {
      this.$emit('toggleClick')
    }
  }
}
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>
